// 折线图
let LineChart = {
  setData: function (canId, data, padding, lineColors, dotColor, isBg, isMultiData, xkedu) {
    this.lineColors = lineColors
    this.dotColor = dotColor
    this.can = document.getElementById(canId)
    this.ctx = this.can.getContext('2d')
    this.isBg = isBg
    this.isMultiData = isMultiData
    this.drawXY(data, 0, padding, this.can, xkedu, lineColors)
  },
  // 是否是多条数据线
  isMultiData: function (data) {
    if (data.values.length > 1) {
      this.isMultiData = true
    }
  },
  // 绘制XY坐标值及坐标线 背景线
  drawXY: function (data, key, padding, can, xkedu, lineColors) {
    this.ctx.font = '14px'
    let perwidth = 30// x 轴每一个数据占据的宽度
    can.width = this.getCoordX(padding, perwidth, data.values[0].value0.length) // canvas的宽度
    let maxY = this.getMax(data, 0, this.isMultiData)// 获得Y轴上的最大值
    let ylimt = this.getYLimtByMaxData(maxY).ylimt // y轴 刻度
    let yPixel = this.getYPixel(maxY, can.height, padding, ylimt).pixel // y轴 刻度之间的间距
    can.height = yPixel * (ylimt.length - 1) + padding // y轴图像真实的高度  解决：yPixel改变， 总体高度改变问题
    let yCanMove = 8 // 整体向下走 解决到顶部的问题
    // // 一个x刻度对应4个值
    for (let i = 0; i < xkedu.length; i++) {
      let dotxlimt = this.getCoordX(padding, perwidth, 2) - this.getCoordX(padding, perwidth, 1) // 每个点之间横坐标的差值
      let x_x = perwidth + perwidth * 4 * i + padding// x刻度的横坐标
      let x_y = can.height - padding + 20 + yCanMove
      this.ctx.fillStyle = '#fff'
      this.ctx.fillText(xkedu[i], x_x, x_y, 100)
    }
    // 每个x刻度对应着一个值
    // for( let i=0;i<data.values[key]["value"+key].length;i++ ){
    //   ptindex = i+1;
    //   let x_x = this.getCoordX(padding,perwidth,ptindex);
    //   let x_y = can.height-padding+20;
    //   this.ctx.fillText(data.values[key]["value"+key][i].x,x_x,x_y,perwidth);
    // }
    this.ctx.fillStyle = '#fff'
    this.ctx.textAlign = 'right'// y轴文字靠右写
    this.ctx.textBaseline = 'middle'// 文字的中心线的调整
    for (let i = 0; i < ylimt.length; i++) {
      // y轴坐标 数值和坐标要倒着放
      let unit = this.getYLimtByMaxData(maxY).unit
      this.ctx.fillText(ylimt[i], padding - 10, ylimt[ylimt.length - 1 - i] / unit * yPixel + yCanMove)
      // 背景横线
      this.ctx.lineWidth = '1'
      this.ctx.strokeStyle = '#595e6b'
      let y = ylimt[ylimt.length - 1 - i] / unit * yPixel + yCanMove
      this.ctx.moveTo(padding, y)
      this.ctx.lineTo(perwidth * (data.values[0].value0.length - 1) + padding, y)
      this.ctx.lineJoin = 'round'
      this.ctx.stroke()
    }
    this.ctx.lineWidth = '1'
    this.ctx.strokeStyle = '#595e6b'// 刻度颜色
    this.ctx.beginPath()
    // 画y轴那条线
    this.ctx.moveTo(padding, yCanMove)
    this.ctx.lineTo(padding, can.height - padding + yCanMove)
    // 画右侧闭合那条线
    this.ctx.moveTo(perwidth * (data.values[0].value0.length - 1) + padding, yCanMove)
    this.ctx.lineTo(perwidth * (data.values[0].value0.length - 1) + padding, can.height - padding + yCanMove)
    this.ctx.stroke()
    this.ctx.closePath()
    this.drawData(data, 0, padding, perwidth, yPixel, this.isMultiData, lineColors, unit, ylimt, can, yCanMove)
  },
  // 绘制数据线和数据点
  drawData: function (data, key, padding, perwidth, yPixel, isMultiData, lineColors, unit, ylimt, can, yCanMove) {
    if (!isMultiData) {
      let keystr = 'value' + key
      this.ctx.beginPath()
      this.ctx.lineWidth = '2'
      this.ctx.strokeStyle = lineColors
      /* 下面绘制数据线 */
      let startX = this.getCoordX(padding, perwidth, 0)
      this.ctx.beginPath()
      this.ctx.lineWidth = '3'
      for (let i = 0; i < data.values[key][keystr].length; i++) {
        let x = this.getCoordX(padding, perwidth, i)
        // y轴坐标计算：y轴总体的高度(can.height-padding) 减去 应该在的坐标  等于  显示在图上的坐标
        let y = can.height - padding - ((can.height - padding) * data.values[key][keystr][i].y / ylimt[ylimt.length - 1]) + yCanMove
        this.ctx.lineTo(x, y)
        this.ctx.lineJoin = 'round'
      }
      this.ctx.stroke()
      this.ctx.closePath()
      /* 下面绘制数据线上的点 */
      this.ctx.beginPath()
      // this.ctx.fillStyle=this.dotColor;
      this.ctx.fillStyle = lineColors
      for (let i = 0; i < data.values[key][keystr].length; i++) {
        // 圆点x轴开始的位置
        let x = this.getCoordX(padding, perwidth, i)
        let y = can.height - padding - ((can.height - padding) * data.values[key][keystr][i].y / ylimt[ylimt.length - 1]) + yCanMove
        this.ctx.moveTo(x, y)
        this.ctx.arc(x, y, 2, 0, Math.PI * 2, true)// 绘制数据线上的点
        this.ctx.fill()
      }
      this.ctx.closePath()
    } else { // 如果是多条数据线
      for (let i = 0; i < data.values.length; i++) {
        LineChart.drawData(data, i, padding, perwidth, yPixel, false, lineColors[i], unit, ylimt, can, yCanMove)
      }
    }
  },
  // 宽度
  getPixel: function (data, key, width, padding) {
    let count = data.values[key]['value' + key].length
    return (width - 20 - padding) / (count + (count - 1) * 1.5)
  },
  // 横坐标X 随ptindex 获得
  getCoordX: function (padding, perwidth, ptindex) { // 下标从1开始 不是从0开始
    return perwidth * ptindex + padding
  },
  // y轴的之间间距
  getYPixel: function (maxY, height, padding, ylimt) {
    return {pixel: (height - padding) / (ylimt.length - 1)}
  },
  // 获取y轴刻度、unit  params：数据的最大值
  getYLimtByMaxData: function (maxY) {
    let ylimt = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    // let ylimt = [0, 2, 4, 6, 8, 10];
    let unit = 10
    if (maxY > 0 && maxY <= 10) {
      unit = 1
    } else if (maxY <= 100) {
      unit = 10
    } else if (maxY <= 1000) {
      unit = 100
    } else if (maxY <= 10000) {
      unit = 1000
    } else if (maxY <= 100000) {
      unit = 10000
    } else {
      alert('最大数据值不在0至100000之间')
    }
    for (let i = 0; i < ylimt.length; i++) {
      ylimt[i] = ylimt[i] * unit
    };
    return {ylimt: ylimt, unit: unit}
  },
  getMax: function (data, key, isMultiData) {
    if (!isMultiData) {
      let maxY = data.values[key]['value' + key][0].y
      let length = data.values[key]['value' + key].length
      let keystr = 'value' + key
      for (let i = 1; i < length; i++) {
        if (maxY < data.values[key][keystr][i].y) maxY = data.values[key][keystr][i].y
      }
      return maxY// 返回最大值 如果不是多数据
    } else {
      let maxarr = []
      let count = data.values.length// 多条数据的数据长度
      for (let i = 0; i < count; i++) {
        maxarr.push(LineChart.getMax(data, i, false))
      }
      let maxvalue = maxarr[0]
      for (let i = 1; i < maxarr.length; i++) {
        maxvalue = (maxvalue < maxarr[i]) ? maxarr[i] : maxvalue
      }
      return maxvalue
    }// 如果是多条数据
  }
}
